import React from "react";
import GoBack from "../../source/svgs/goBack.svg"
import { useNavigate } from "react-router-dom";
import style from "./style.less"

interface IProps {
  left: { title: string, url: string }
  title: string
  right: { title: string, url: string }
}

export default function Headers(Props: IProps) {
  const navigate = useNavigate()
  return (
    <React.Fragment>
      <div className={style.top}>
        <div className={style.topBar} >
          <div onClick={() => { navigate(Props.left.url) }}>
            <img src={GoBack} alt="" /><span className={style.decration} >{Props.left.title}</span>
          </div>
          <div className={style.decration}>
            <span>{Props.title}</span>
          </div>
          <div className={style.decration} onClick={() => { navigate(Props.right.url) }}>{Props.right.title}</div>
        </div>
      </div>
    </React.Fragment>
  )
}